<template>
  <div class="commerce-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" left-text="入驻商务部" left-arrow @click-left="$router.back()" />

    <div class="main">
      <van-cell class="title"><h2>企业资料</h2></van-cell>
      <van-form ref="commerceForm" label-width="90">
        <van-field
          readonly
          clickable
          v-model="formData.legalPerson"
          name="legalPerson"
          label="法人类型"
          placeholder="请选择法人类型"
          :rules="rules.legalPerson"
          @click="showLegalPerson = true"
        />
        <!-- 选择法人弹层 -->
        <picker-item :showTitle="'法人类型'" :showPopup="showLegalPerson" :columns="legalPersonType" @confirm="confirm" @close="showLegalPerson = false" />

        <van-field v-model="formData.companyName" name="companyName" label="企业名称" placeholder="请填写企业名称" :rules="rules.companyName" />

        <van-field v-model="formData.creditCode" name="creditCode" label="社会信用代码" placeholder="请填写18位社会信用" maxlength="18" :rules="rules.creditCode" />

        <van-field
          readonly
          clickable
          v-model="formData.registerTime"
          name="registerTime"
          label="注册时间"
          placeholder="请选择注册时间"
          :rules="rules.registerTime"
          @click="showRegisterTime = true"
        />
        <!-- 选择注册时间弹层 -->
        <van-popup v-model="showRegisterTime" position="bottom" @close="showRegisterTime = false">
          <van-datetime-picker v-model="currentDate" type="date" title="请选择注册时间" @confirm="confirmTime" @cancel="showRegisterTime = false" />
        </van-popup>

        <van-field v-model="formData.capital" name="capital" label="注册资本" placeholder="请填写注册资本(单位: 万元)" :rules="rules.capital" />

        <van-field
          readonly
          clickable
          v-model="formData.area"
          name="area"
          label="注册地区"
          placeholder="请选择注册地区"
          :rules="rules.area"
          @click="showSelectArea = true"
        />
        <!-- 选择地区弹层 -->
        <select-area :showSelectArea="showSelectArea" @confirm="confirmArea" @close="showSelectArea = false" />

        <van-field
          readonly
          clickable
          v-model="formData.enterprise"
          name="enterprise"
          label="企业类型"
          placeholder="请选择企业类型"
          :rules="rules.enterprise"
          @click="showEnterprise = true"
        />
        <!-- 企业类型弹层 -->
        <picker-item :showTitle="'企业类型'" :showPopup="showEnterprise" :columns="enterpriseType" @confirm="confirm" @close="showEnterprise = false" />

        <toggle-tag :showTitle="'主营业务'" :tag-list="Company.occupation" :tag-data="formData.businessScope" @pushTag="pushTag" @spliceTag="spliceTag" />
        <!-- <van-cell title="主营业务" class="tag-wrap">
          <div slot="label" class="tag">
            <van-tag v-for="item in Company.occupation" :key="item.id" :class="formData.businessScope.find(key => key === item.name) ? 'active' : ''" plain round size="large" @click="change(item)">{{ item.name }}</van-tag>
          </div>
        </van-cell> -->
        <van-button class="btn" type="info" native-type="submit" @click="submit">提交资料</van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
import PickerItem from './components/picker-item'
import { formatDate } from '@/utils/dayjs'
import Company from '@/api/constant/company'
import { validEmptyString } from '@/utils/config'

export default {
  name: 'Commerce',
  components: { PickerItem },
  data () {
    return {
      Company,
      formData: {
        legalPerson: '', // 法人类型
        companyName: '', // 企业名称
        creditCode: '', // 社会信用代码
        registerTime: '', // 注册时间
        capital: '', // 注册资本
        area: '', // 注册地区
        enterprise: '', // 企业类型
        businessScope: [] // 主营业务
      },
      rules: {
        legalPerson: [{ required: true, message: '请选择法人类型', trigger: 'onChange' }],
        companyName: [{ required: true, message: '请填写企业名称' }],
        creditCode: [{ required: true, message: '请填写社会信用' }],
        registerTime: [{ required: true, message: '请选择注册时间', trigger: 'onChange' }],
        capital: [{ required: true, message: '请填写注册资本' }],
        area: [{ required: true, message: '请选择注册地区', trigger: 'onChange' }],
        enterprise: [{ required: true, message: '请填写企业类型', trigger: 'onChange' }]
      },
      showLegalPerson: false, // 控制法人类型弹出层
      showRegisterTime: false, // 控制注册时间弹出层
      showSelectArea: false, // 控制注册地区弹出层
      showEnterprise: false, // 控制企业类型弹出层
      currentDate: new Date(),
      legalPersonType: ['全民所有制企业法人', '集体所有制企业法人', '中外合资经营企业法人', '中外合作经营企业法人', '外商独资企业法人'],
      enterpriseType: ['合资', '独资', '国有', '私营', '全民所有制', '集体所有制', '股份制', '有限责任']
    }
  },
  created () {},
  mounted () {},
  methods: {
    confirm (value, title) {
      if (title === '法人类型') {
        this.formData.legalPerson = value
        this.showLegalPerson = false
      } else if (title === '企业类型') {
        this.formData.enterprise = value
        this.showEnterprise = false
      }
    },
    confirmTime (value) {
      this.formData.registerTime = formatDate(value)
      this.showRegisterTime = false
    },
    confirmArea (value) {
      this.formData.area = value.map(item => item.name).join('-')
      this.showSelectArea = false
    },
    // change (item) {
    //   const index = this.formData.businessScope.findIndex(key => key === item.name)
    //   index === -1 ? this.formData.businessScope.push(item.name) : this.formData.businessScope.splice(index, 1)
    // },
    pushTag (item) {
      this.formData.businessScope.push(item.name)
    },
    spliceTag (index, value) {
      this.formData.businessScope.splice(index, value)
    },
    async submit () {
      try {
        validEmptyString(this.formData)
        await this.$refs.commerceForm.validate()
        this.$toast.loading({
          message: '提交中...', // 展示时的提示信息
          forbidClick: true, // 展示时, 静止点击背景
          duration: 0 // toast 展示时间 默认为2秒, 0 表示持续展示
        })
        console.log(this.formData)
        this.$toast.success('提交资料成功')
        this.$router.back()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/styles/from.less';
.commerce-container {
  padding-bottom: 88px;
  .main {
    .tag-wrap {
      .van-cell__title {
        &>span {
          color: #646566;
        }
      }
    }
  }
}
</style>
